<template>
	<view class="container">
		<my-scroll-tab :list="category" bgColor="#fff" :current="currentIndex" @itemClick='itemClick'></my-scroll-tab>
		<view class="monitoring-container" v-if="list.length>0">
			<view class="monitoring-items">
				<view class="monitoring-item" v-for="(item,index) in list" :key="item.id" @click="jump(item.serial)">
					<view class="monitoring-item-top">
						<image :src="item.img" class="cover-img"/>
						<image src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/common/play.png" mode="widthFix" class="play-img"/>
					</view>
					<view class="monitoring-item-bot">{{item.name}}</view>
				</view>
			</view>
		</view>
		<view class="empty-container" v-else>
			<u-empty text="暂无相关数据" :icon="emptyIcon"/>
		</view>
	</view>
</template>

<script>
	var _this;
	export default {
		data() {
			return {
				currentIndex:0,
				emptyIcon:'https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/common/empty.png',
				list: [],
				category:[
					{
						id: 0,
						name: '全部',
					}
				],
				c_id: 0,
			};
		},
		methods: {
			itemClick(index){
				if(_this.c_id==_this.category[index]['id']){
					return
				}
				_this.c_id=_this.category[index]['id']
				_this.list=[]
				_this.get_list()
			},
			async get_monitor_class(){
				const data=await _this.$post('api/get_monitor_class')
				if(data.code==200){
					_this.category.push(...data.data.list)
				}
			},
			async get_list(){
				const params={
					'c_id':_this.c_id
				}
				const data=await _this.$post('api/get_monitor_list',params)
				if(data.code==200){
					_this.list=data.data.list
				}
			},
			jump(serial){
				this.$u.route({
					url: '/pages/index/m-detail',
					params:{
						serial
					}
				})
			}
		},
		onLoad(e) {
			_this = this;
			_this.get_monitor_class()
			_this.get_list()
		},
		onPullDownRefresh() {
			_this.category=[
					{
						id: 0,
						name: '全部',
					}
				]
			_this.get_monitor_class()
			_this.get_list()
			uni.stopPullDownRefresh()
		},
		onShow() {

		},
		components: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 0;
		.scroll{
			background: #fff;
			height: 80rpx;
			white-space: nowrap;
			view{
				display: inline-block;
				height: 80rpx;
				line-height: 80rpx;
				font-size: 28rpx;
				padding: 0 20rpx;
				position: relative;
			}
			.active{
				color: $theme-color;
				&::after{
					content: '';
					width: 40rpx;
					height: 4rpx;
					background: $theme-color;
					position: absolute;
					border-radius: 4rpx;
					left: calc(50% - 20rpx);
					bottom: 0;
				}
			}
		}
		.monitoring-container{
			padding: 20rpx 20rpx 0 20rpx;
			.monitoring-items{
				background-color: #fff;
				border-radius: 10rpx;
				padding: 20rpx 20rpx 0 20rpx;
				display: flex;
				flex-wrap: wrap;
				.monitoring-item{
					width: 49%;
					margin-bottom: 20rpx;
					&:nth-child(2n+1){
						margin-right: 2%;
					}
					.monitoring-item-top{
						position: relative;
						.cover-img{
							width: 100%;
							height: 230rpx;
							border-radius: 10rpx;
						}
						.play-img{
							width: 80rpx;
							position: absolute;
							left: calc(50% - 40rpx);
							top: calc(50% - 40rpx);
						}
					}
					.monitoring-item-bot{
						margin-top: 10rpx;
						font-size: 28rpx;
						color: $color-919191;
					}
				}
			}
		}
	}
</style>